<template>
  <div id="app">
    <TopHead :key="$store.state.topHeadKey" />
    <Nav />
    <router-view />
    <Footer />
    <transition name="scale">
      <Login v-show="$store.state.isShowLoginBox" />
    </transition>
    <Toast v-show="$store.state.isShowTost" ></Toast>
  </div>
</template>
<script>
import TopHead from "./components/common/TopHead.vue";
import Nav from "./components/common/Nav.vue";
import Footer from "./components/common/Footer.vue";
import Login from "./components/common/Login.vue";
import Toast from "./components/common/Toast.vue";

export default {
  data() {
    return {
      mag: "你好",
    };
  },
  components: {
    TopHead,
    Nav,
    Footer,
    Login,
    Toast,
  },
};
</script>


<style lang="less">
.scale-enter,
scale-leave-to {
  opacity: 0;
}
.scale-enter-active,
scale-leave-active {
  transition: opacity 0.5s;
}
.scale-enter-to,
scale-leave {
  opacity: 1;
}
</style>
